<template>
	<view class="centers">
		<view class="inv-h-ws">
			<view :class="['inv-hs',Inv==0?'inv-h-ses':'']" @click="Inv=0">
				<view class="tab-cen">
					<view>女生</view>
				</view>
			</view>
			<view :class="['inv-hs',Inv==1?'inv-h-ses':'']" @click="Inv=1">
				<view class="tab-cen">
					<view>男生</view>
				</view>
			</view>
			<view :class="['inv-hs',Inv==2?'inv-h-ses':'']" @click="Inv=2">
				<view class="tab-cen">
					<view>儿童</view>
				</view>
			</view>
		</view>
		<view class="" v-show="Inv == 0">
			<view class="cen-top"> 
				<text >短发</text>				
				<text >短发</text>
				<text >短发</text>
			</view>
			<view class="cent-tab">
				<view class="cent-top">
					
				</view>
				<view class="cent-banner">
					<view class="center-w" v-for="(item,index) in 6" :key="index">
						<image src="/static/timg.jpg" mode=""></image>
					</view>
					
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {

		data() {
			return {
				Inv: 0,

			}
		},
		created() {


		},
		methods: {


			changeTab(Inv) {
				that.navIdx = Inv;
			},

		}
	}
</script>


<style lang="scss" scoped>
	page {
		background-color: #F1F1F1;
	}

	.inv-h-ws {
		background-color: #FFFFFF;
		display: flex;

		.inv-hs {
			padding: 0 20rpx;
			font-size: 30upx;
			color: #666;

			.tab-cen {
				padding: 20rpx;
			}
		}

		.inv-h-ses {
			font-weight: bold;
			color: #00c6c2;
		}

	}
	.cen-top{
		padding:18rpx 0;
		background-color:#eeeeee;
		display: flex;
		
		text{
			margin-left: 27rpx;
			display: inline-block;
			font-size: 24rpx;
			font-family: PingFang;
			font-weight: 500;
			color: #2F2F2F;
			padding:14rpx 26rpx;
			background-color: #fff;
			
		}
		
	}
	.cent-tab{
		padding: 0 25rpx;
		background-color: #fff;
		
		.cent-top{
			padding:31rpx 0;
		}
		.cent-banner{
			display: flex;
			align-items: flex-end;
			justify-content: space-between;
			flex-wrap: wrap;
			.center-w{
				width: 49%;
				height: 345rpx;
				padding-bottom: 9rpx;
				
				image{
					width: 100%;
					height: 345rpx;
				}
			}
		}
	}
</style>
